<template>
<div class="MainSetting2">
<Row>
 <Col span="8" class="ty-col">
 	<Button custom-icon="iconfont icon-save" shape="circle" type="primary" @click="success">保存</Button>
	<Divider type="vertical" />
	<Button icon="md-add" shape="circle" @click="handleAddRow">添加</Button>
	<br><br>
	<Table :columns="columns" :data="data" :show-header="false" @on-row-click="handleRowClick" highlight-row border>
		<template #role="{ row, index }">
		<Row>
			<Col span="12" class="ty-flex-row-left">
				<Input type="text" v-model="editRole" v-if="editIndex === index" placeholder="请输入角色名称"/> 
				<span v-else>{{ row.role }}</span>
			</Col>
		    <Col span="12" class="ty-flex-row-right">	  
		      <span v-if="editIndex === index">
		        <Button icon="md-checkmark" type="success" @click="handleSaveRow(row,index)"></Button> &nbsp;
		        <Button icon="md-close" type="error" @click="editIndex = -1"></Button>&nbsp;
		      </span>
		      <span v-else>
		       	<Button type="text" custom-icon="iconfont icon-bianji" @click="handleEditRow(row, index)" shape="circle"></Button>&nbsp;
		      </span>
		      <span>
		        <Button type="text" custom-icon="iconfont icon-laji" @click="modalDelete = true" shape="circle"></Button>
		        <Modal v-model="modalDelete" width="360">
			        <p slot="header" style="color:#f60;text-align:center">
			            <Icon type="ios-information-circle"></Icon>
			            <span>删除确认</span>
			        </p>
			        <div style="text-align:center">
			            <p>确定要删除当前角色吗</p>
			        </div>
			        <div slot="footer">
			            <Button type="error" @click="handleDeleteRow(row, index)">删除</Button>
			        </div>
			    </Modal>	
		      </span>
		     </Col>
	     </Row>
	     </template>
	</Table>
 </Col>
 <Col span="16" class="ty-col" v-show="tableRowClicked!=-1">
   	<CheckboxGroup v-for="n in navFirst" :key="n.id" v-model="MainNav[n.id]" size="large" @on-change="handleCheckBoxGroupChange">
   		<Divider orientation="left" size="default"><Icon :type="n.icon"></Icon>{{n.text}}</Divider>
        <Checkbox v-for="sn in navSecond(n.text)" :key="sn.id" :label="sn.id" size="default" border class="ivu-mb-8">
            <Icon :type="sn.icon"></Icon>
            <span>{{sn.text}}</span>
        </Checkbox>
    </CheckboxGroup>
   </Col>
  </Row>
</div>
</template>
<script>
export default {
    data () {
        return {
        	columns:[
        		{title:'角色名',slot:'role',align:'left'}
        	],
        	data:[],
			navList:[],
        	editRole:'',
        	editIndex:-1,
        	MainNav:{},
        	tableRowClicked:-1,
        	modalDelete:false
        }
    },
	methods: {
	   handleEditRow (row, index) {
	        this.editRole = row.role;
	        this.editIndex = index;
	   },
	   handleSaveRow (row,index) {
	        this.data[index].role = this.editRole;
	        this.editIndex = -1;
	   },
	   handleDeleteRow (row, index) {
	       this.data.splice(index,1)
	       this.modalDelete=false
	   },
	   handleAddRow(){
		   let r={role:'',MainNav:{MainSetting:[],MainMini:[],MainMerchant:[],MainCase:[]}}
		   this.editIndex=this.data.length
		   this.editRole=r.role
		   this.data.push(r)
	   },
	   handleRowClick(row,index){
		   this.tableRowClicked=index
		   this.MainNav=row.MainNav
	   },
	   handleCheckBoxGroupChange(checked){
		   this.data[this.tableRowClicked].MainNav=this.MainNav
	   },
       success () {
		   this.$axios({
			   method: 'POST',
			   url:"mainSettring2Save.action",
			   data: JSON.stringify(this.data),
			   headers: {'Content-Type': 'application/json;charset=UTF-8'}
		   }).then(res=>{
			   if(res.data==='suc')this.$Message.success({content:'保存成功',background: true})
		   })
           
       }
	},
	computed:{
	   navFirst(){
	   	return this.navList.filter(n=>n.ptext==null)
	   },
	   navSecond(){
	   	return (a)=>this.navList.filter(n=>n.ptext===a)
	   }
	},
	mounted(){
		this.$axios.get("mainSetting2List.action").then(res=>{
			this.data=res.data;
		})
		this.$axios.post("mainSetting1NavList.action").then(res=>{
			this.navList=res.data
		})
	}
}
</script>
<style scoped>
.ty-col{padding:16px;}
</style>